<!--
 * @Author: fengxx
 * @Date: 2025-09-09 21:26:43
 * @LastEditors: fengxx
 * @LastEditTime: 2025-11-13 23:29:14
-->
<script setup lang="ts">
import { nextTick, onBeforeMount, onMounted, reactive, ref, watch, watchEffect } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { useProductStore } from '@/stores/product'
import { useRoute } from 'vue-router'
// const counterStore = useCounterStore()
// const productStore = useProductStore()
// // console.log(counterStore.count)
// productStore.$subscribe(
//   (mutation, state) => {
//     console.log(mutation.type, state)
//   },
//   { flush: 'sync' },
// )
// counterStore.count = 4
// // counterStore.$reset()
// counterStore.$patch({
//   count: 8,
// })

// productStore.increment()
// console.log(counterStore.count, productStore.name)
// const state = reactive({
//   someObject: {
//     a: 1,
//   },
// })

// watch(
//   () => state.someObject,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue)
//     // 在嵌套的属性变更时触发
//     // 注意：`newValue` 此处和 `oldValue` 是相等的
//     // 因为它们是同一个对象！
//   },
//   { deep: 1, immediate: true, once: true },
// )

// state.someObject.a = 2

// const route = useRoute()
// 路由接参：query代表 ? 后的参数; params代表动态传参
// console.log(route.query, route.params, route.path)

const count = ref(0)
// const state = reactive({ name: 'vue' })
// watch(count, (newVal) => {  console.log('count changed:', newVal);  });
// watchEffect(() => {  console.log('count:', count.value);  });
// watch(
//   () => state.name,
//   (newVal) => {
//     console.log('name changed:', newVal)
//   },
// )
// watchEffect(() => {
//   console.log('name:', state.name)
// })
// const increment = () => {
//   count.value++
//   console.log('同步:', count.value)
//   nextTick(() => {
//     console.log('nextTick:', count.value)
//   })
// }
// onBeforeMount(() => {
//   console.log('child beforeMount')
// })
// console.log('child setup')

// let u: unknown = 10
// u = 'hello' // 允许
// const s: string = u // 不允许，unknown类型不能赋值给其他元素

// function error(): never {  throw new Error("error");  }
// const n: never = 10; // 不允许，never类型不能被赋值

const updateCount = () => {
  count.value = 1
  count.value = 2
  count.value = 3
}
watch(count, (newVal) => {
  console.log('count changed to:', newVal)
})

onMounted(() => {
  // console.log('child mounted')
  // async function asyncFunc() {
  //   console.log('A')
  //   await Promise.resolve()
  //   console.log('B')
  //   return 'C'
  // }
  // console.log('D')
  // asyncFunc().then(console.log)
  // console.log('E')
  // const arr = [1, 2, 3]
  // const result = arr.map((num) => num * 2).filter((num) => num > 3)
  // console.log(result)
  // const obj = {
  //   name: 'Alice',
  //   greet: function () {
  //     setTimeout(() => {
  //       console.log(`Hello, ${this.name}`)
  //     }, 100)
  //   },
  // }
  // obj.greet()
})
</script>

<template>
  <!-- <div>{{ $route.query.aboutName }}{{ $route.params.id }}</div> -->
  <div @click="updateCount">{{ count }}</div>
</template>
